import '@site/component-style';

import React, { useReducer } from 'react';
import { useRoutes } from 'react-router-dom';
import routers from '@site/component-routes';
import { CssBaseline, ThemeProvider } from '@mui/material';
import { initState, CustomizerReducer, context } from '@site/hooks/useRedux';
import { BuildTheme } from '@site/common/theme';

const App = () => {
  const state = {...initState, routers};
  const store = useReducer(CustomizerReducer, state);
  const [customizer] = store;
  const theme = BuildTheme(customizer);
  const routing = useRoutes(routers);
 
  return (
    <context.Provider value={store}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        {routing}
      </ThemeProvider>
    </context.Provider>
  );
};
export default App;
